<template>
  <div class="all">
    <warp />
    <div class="order">
      <div class="order-head">
        <div class="flex-center">
          <img src="./assets/logo_writer.png"  alt="">
          <h3>结算页</h3>
        </div>
        <img src="./assets/jindutiao.png"  alt="">
      </div>
      <h2>填写并核对订单信息</h2>
      <div class="message-box">
        <div class="flex-between">
          <h3>收货人信息</h3>
          <a href="">新增收货地址</a>
        </div>
        <div class="message-box-content">
          <p class="xuanxiang">马子毅 {{address}}</p>
          <p>马子毅</p>
          <p>18888888888</p>
          <p>{{address}}</p>
          <p class="biaoqian">默认地址</p>
        </div>
      </div>
      <div class="message-box">
        <div class="flex-between">
          <h3>支付方式</h3>
        </div>
        <div class="message-box-content">
          <input type="radio" v-model="支付方式" value="货到">
          <p class="weixuan" :class="{'xuanxiang' : 支付方式 === '货到'}">货到付款</p>
          <input type="radio" v-model="支付方式" value="在线">
          <div class="weixuan" :class="{ 'xuanxiang': 支付方式 === '在线' }">
            <span> <span class="hui">惠</span>在线支付</span>
          </div>
        </div>
      </div>
      <div class="message-box">
        <div class="flex-between">
          <h3>送货清单</h3>
          <div >
            <a style="margin-right: 20px;"  href="">价格说明</a>
            <a @click="goBack">返回上一页</a>
          </div>
        </div>
        <div  class="goods">
          <div class="peisong">
            <div>
              <h4>配送方式</h4>
              <p class="xuanxiang">京东快递</p>
            </div>
            <div>预计明天 ({{ currentDate }}) 24:00前发货</div>
            <hr>
          </div>
          <div class="goodList">
            <table v-for="(item, index) in products" :key="item.id" class="goodsTable">
              <tr>
                <td rowspan="2">
                  <img :src="item.img  || defaultImage" width="100px">
                </td>
                <td  colspan="1">
                  <div class="goodTitle">
                    <span>{{item.title}}</span>
                  </div>
                </td>
                <td>￥{{item.price.toFixed(2)}}</td>
                <td> X{{item.quantity}} </td>
              </tr>
              <tr>
                <td colspan="1">
                  <span v-if="item.color"> 颜色：{{item.color}}</span>
                  <span v-if="item.size"> 尺寸：{{item.size}}</span>
                </td>
              </tr>
              <tr>
                <td colspan="4">
                  <div><span>留言:</span>
                    <input type="text" v-model="remark" placeholder="建议留言前先与商家沟通确认" class="remark">
                  </div>
                </td>
              </tr>

            </table>
          </div>
        </div>

      </div>
      <div class="message-box">
          <h3>发票信息</h3>
          <div class="message-box-content">
            <span style="margin-right: 20px;"> 不开发票</span>

            <a href="">修改</a>
          </div>
      </div>
      <div class="message-box">
          <h3>使用优惠卷/礼品卡/抵用</h3>
          <div class="price_content">
            <div class="price_content_item">
              <span style="margin-right: 20px">总商品金额</span>
              <span> ￥{{total}}</span>
            </div>
            <br>
            <div class="price_content_item">
              <span style="margin-right: 20px">运费</span>
              <span> ￥0.00</span>
            </div>
          </div>
      </div>
      <div >
        <div>应付金额 <span>{{total}}</span></div>
      </div>
    </div>
    <div style="height: 100px; width: 80% ;background-color: #f4f4f4 ">
        <div >
          <span>应付金额 <span style="color: red ;font-size: 25px">{{total}}</span></span>
        </div>
    </div>
  </div>
  <end></end>
</template>

<script setup>
import {computed, ref} from "vue";
import { useRoute ,useRouter } from "vue-router";
router=useRouter();
import Warp from "@/components/warp";
import router from "@/router";
import End from "@/components/end";

const route = useRoute();
const products = ref(JSON.parse(route.query.products  || '[]'));
const address = ref(route.query.address  || '');
const 支付方式 = ref('');
const goBack = () => {
  router.go(-1);  // 返回历史记录中的上一页
};
const remark=ref('');
const today = new Date();
const tomorrow = new Date(today);
tomorrow.setDate(today.getDate()  + 1); // 设置为明天

const currentDate = tomorrow.toLocaleDateString('zh-CN',  {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit'
});
const total=computed(() => {
  return products.value.reduce((total,item)=>total+item.price*item.quantity,0)
})
</script>

<style scoped>
.all {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.order {
  background-color: #fff;
  width: 80%;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}
.goodsTable td {
  padding: 4px 8px; /* 统一设置所有单元格内边距 */
}
.message-box-content {
  display: flex;
  align-items: center;
}
.order-head {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
}

.message-box {
  border: 1px solid #f2f2f2;
  padding: 0 20px;
}

.message-box-content p {
  margin-right: 20px;
}

.biaoqian {
  background-color: #999;
  color: #fff;
  padding: 5px;
  font-size: 12px;
}

.xuanxiang {
  display: flex;
  align-items: center;
  border: 2px solid red;
  padding: 5px;
  background-color: white !important;
}
.weixuan{
  display: flex;
  align-items: center;
  background-color: #f3f3f3;
  padding: 5px;
}
.hui {
  color: white;
  background-color: red;
 padding: 2px;
  margin-right: 5px;
}
.peisong{
  display: flex;
  /*竖向排列*/
  flex-direction: column;
  align-items:start;
  padding-left: 15px ;
  height: 100%;
  width: 40%;
  background-color:#f7f7f7 ;
}
.goodList{
  height: 100%;
  width: 60%;
  background: #f3fbfe;
  padding: 5px;
}
.goodTitle{
  display: flex;
  width: 300px;
  background-color: #f7f7f7;
}
.goods{
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #f7f7f7;
}
.goodsTable{
  width: 100%;
  margin: 10px
}
.remark{
  width: 90%;
  border: 1px solid red;
}
.price_content{
  float: right;
  margin: 10px;
  hieght: 100px;
  background-color: #f7f7f7;
}
.price_content_item{
  float: right;
  display: flex;
  justify-content: space-between;
  width: 200px;
  background-color: #f7f7f7;
  margin: 10px;
}
</style>